<template>
    <div class="min-h-screen w-full bg-gray-100 fixed inset-0 overflow-y-auto">
        <!-- 表单内容 -->
        <div class="px-4">
            <!-- 头像 -->
            <div class="flex flex-col items-center justify-center pt-8 pb-8">
                <img src="@/assets/images/avatar.png" alt="头像"
                    class="block w-[160px] min-h-[160px] rounded-full mx-auto mb-10">
            </div>

            <!-- 昵称 -->
            <div class="mb-6">
                <label class="block text-lm mb-2 pl-3 ">昵称</label>
                <div class="relative bg-white rounded-lg px-3 py-2">
                    <input v-model="form.nickname" type="text" class="w-full h-11 px-3 bg-transparent outline-none"
                        placeholder="请输入昵称">
                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-400">
                        {{ form.nickname.length }}/15
                    </span>
                </div>
            </div>

            <!-- 手机号码 -->
            <div class="mb-6">
                <label class="block text-lm mb-2 pl-3">电话号码</label>
                <div class="bg-white rounded-lg px-3 py-2">
                    <input v-model="form.phone" type="tel" class="w-full h-11 px-3 bg-transparent outline-none"
                        placeholder="请输入手机号码" @input="validatePhone" :class="{ 'border-red-500': errors.phone }">
                    <p v-if="errors.phone" class="text-xs text-red-500 mt-1 pl-1">{{ errors.phone }}</p>
                </div>
            </div>

            <!-- 保存按钮 -->
            <button class="w-full bg-[#2970FF] text-white rounded-lg py-3 mt-8" @click="handleSave">
                保存
            </button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

const form = ref({
    avatar: '',
    nickname: 'Chasel',
    phone: '17310096107'
})

// 添加错误提示状态
const errors = ref({
    phone: ''
})

// 添加手机号验证函数
const validatePhone = () => {
    const phoneRegex = /^1[3-9]\d{9}$/
    if (!form.value.phone) {
        errors.value.phone = '请输入手机号'
        return false
    }
    if (!phoneRegex.test(form.value.phone)) {
        errors.value.phone = '请输入正确的手机号'
        return false
    }
    errors.value.phone = ''
    return true
}

const handleSave = () => {
    // 保存前验证手机号
    if (!validatePhone()) {
        ElMessage({
            message: errors.value.phone,
            type: 'error',
            duration: 2000,
            center: true
        })
        return
    }

    ElMessage({
        message: '保存成功',
        type: 'success',
        duration: 2000,
        center: true
    })
    
    setTimeout(() => {
        router.push('/mobile/profile')
    }, 1500)
}
</script>

<style>
.el-message {
    --el-message-min-width: 120px;
    --el-message-padding: 14px 20px;
    --el-message-bg-color: rgba(0, 0, 0, 0.8);
    --el-message-text-color: white;
}
</style>